<template>
  <div class="smobox">
    <p class="smp">中国矿业大学南湖校区松苑一号楼</p>
    <div class="smd1">
      <div class="dianc">
        <div :style="{ height: ht2, background: bgc }" class="dc">
        </div>
        <p>{{heights}}</p>
      </div>
      <div class="smd2">
        <p>设备编号：SL19892137892</p>
        <p>
          运行状态：<span :style="{ color: bg }">{{ title }}</span>
        </p>
        <p>运行时间 {{ stores.times().value }}</p>
        <el-button type="danger" class="dibutn1" @click="$emit('eqtoring')">关机</el-button>
        <el-button type="warning" @click="$emit('eqtoring1')">重启</el-button>
        <el-button type="primary" @click="$emit('eqtoring2')">回收</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 导入 正计时
import { useCounterStore } from "../stores/counter.js";
const stores = useCounterStore();

defineEmits(["eqtoring", "eqtoring1", "eqtoring2"]);
defineExpose({ fntitle });
const tl1 = defineProps({
  title: {
    type: String,
    default: "运行中",
  },
  timeDao: {
    type: Number,
    default: 2 * 60 * 60 * 1000,
  },
  heights: {
    default: '90%'
  }
});

const bg = ref("greenyellow");
const bgc = ref("rgb(11, 196, 11)");

const ht1 = ref(0);
const ht2 = ref(0);

// console.log(parseInt(tl1.heights));

const time = setInterval(() => {



  if (ht1.value < parseInt(tl1.heights)) {
    ht1.value++
    ht2.value = ht1.value + '%'
  }

  if (ht1.value > 50 && ht1.value < 80) {
    bgc.value = 'orange'
  } else if (ht1.value >= 80) {
    bgc.value = 'red'

  }



}, 15)


const reftitle = ref(["运行中", "已关机", "设备故障"]);

// console.log(acbut);
function fntitle(i) {
  if (i === "运行中") {
    bg.value = "greenyellow";
  } else if (i === "已关机") {
    bg.value = "#ccc";
  } else if (i === "设备故障") {
    bg.value = "red";
  }
}

fntitle(tl1.title);
</script>

<style lang="less" scoped>
.smobox {
  width: 320px;
  height: 250px;
  background-color: white;
  margin: 0 30px 18px;
  box-shadow: -5px 10px 27px rgb(51 51 51 / 35%);
  border-radius: 10px;
  position: relative;

  // color:red;
  .smp {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
    font-size: 18px;
    display: block;
  }

  .dianc {
    background-color: #f2f2f2;
    width: 60px;
    height: 150px;
    border-radius: 10px 10px 0px 0px;
    margin-left: 10px;
    margin-top: 20px;
    position: relative;

    .dc {
      width: 100%;
      position: absolute;
      bottom: 0;
    }

    p {
      width: 100%;
      position: absolute;
      top: calc(50% - 9px);
      left: calc(50% - 18px);
      // font-size: 18px;
      font-weight: 700;
    }
  }

  .smd1 {
    display: flex;

    .smd2 {
      p {
        margin: 18px;
      }

      .active {
        color: greenyellow;
      }

      .active1 {
        color: #ccc;
      }

      .active2 {
        color: red;
      }

      .dibutn1 {
        margin-left: 20px;
      }
    }
  }
}
</style>
